<template>
    <div class="message-box">
        <transition name="animate__animated animate__bounce animate__faster" leave-active-class="animate__fadeOut"
            enter-active-class="animate__fadeIn" v-for="item, index in status" :key="index">
            <div class="alert alert-dismissible fade show anime message" role="alert" :class="`alert-${item.type}`">
                {{ item.message }}
                <button type="button" class="btn-close" @click="delSome(index)" data-bs-dismiss="alert"
                    aria-label="Close"></button>
            </div>
        </transition>
    </div>

</template>

<script lang='ts'>
import { defineComponent, PropType, onMounted, watch } from 'vue'
import { stutsArray } from './index'
export default defineComponent({
    name: 'Loading',
    props: {
        status: {
            type: Array as PropType<stutsArray>,
            required: true
        },
        del: {
            type: Function,
            required: true
        },
        delSome: {
            type: Function,
            required: true

        }
    },
    setup({ status, del }) {
        let timer: NodeJS.Timer | undefined
        watch(status, () => {
            if (!timer && status.length > 0) timer = setInterval(() => {
                del()
            }, 3000);
            if (status.length === 0 && timer) {
                clearInterval(timer)
                timer = undefined
            }
        })
    }
})
</script>
<style scoped lang="less">
.message {
    margin-bottom: 10px;
}

.message-box {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    width: 50%;
    margin: 0 auto;
    z-index: 9999;
}
</style>